// 获取权限按钮及渲染
import { mapActions, mapGetters } from 'vuex'
import permission from '@/directive/permission/index.js' // 权限判断指令
import { Loading, MessageBox } from 'element-ui'
import { downloadFile } from '@/utils/downloadFile'
import downloadApi from '@/api/download'

// 级联选择器
const cascaderMinxins = {
  mounted() {
    // 级联选择器时 点击文本就让它自动点击前面的input就可以触发选择
    // setInterval(function() {
    //   document.querySelectorAll('.el-cascader-node__label').forEach(el => {
    //     el.addEventListener('click', function() {
    //       if (this.previousElementSibling) {
    //         this.previousElementSibling.click()
    //       }
    //     }, false)
    //   })
    // }, 1000)
  }
}

export { cascaderMinxins }

const districtMixins = {
  created() {
    // 判断是否获取到行政区划
    if (!this.district) {
      const loading = Loading.service({
        background: 'transparnet'
      })
      // 获取行政区域
      this.getLocalPosition().then(res => {
        loading.close()
      }).catch(err => {
        loading.close()
        console.log(err)
        MessageBox.alert('未获取到当前所处区域，请手动选择区域!', '提示', {
          callback: action => {
            console.log(action)
          }
        })
      })
    }
  },
  computed: {
    ...mapGetters(['district'])
  },
  methods: {
    ...mapActions(['getLocalPosition'])
  }
}
export { districtMixins }

const commonMixin = {
  methods: {
    exportList() {
      this.mainLoading = true
      downloadApi(this.downloadOptions.url).then(res => {
        if (res) {
          downloadFile(res, this.downloadOptions.fileName).catch(() => {
            this.$message({
              message: '下载文件失败',
              type: 'error'
            })
          }).finally(() => {
            this.mainLoading = false
          })
        }
      }).catch(() => {
        this.$message({
          message: '下载文件失败',
          type: 'error'
        })
        this.mainLoading = false
      })
    }
  }
}
export { commonMixin }

// 用本地的权限按钮名称替换后台返回的
function mergeFunName(btnLists) {
  btnLists.forEach(btn => {
    const ind = this.btnPermission.findIndex(b => b.funCode === btn.funCode)
    if (ind != -1) {
      this.btnPermission[ind].funName = btn.funName
    }
  })
}
const mixins = {
  data() {
    return {
      btnPermission: ''
    }
  },
  created() {
    const menuCode = this.$route.meta.menuCode
    const menuList = this.roleBtns[menuCode]
    // console.log('menuCode----', menuCode, this.roleBtns, menuList)
    if (menuList && menuList.length) {
      this.makeBtn(menuList)
      this.btnLists && this.setTwoLists(this.btnLists)
      this.btnLists2 && this.setTwoLists(this.btnLists2)
    } else {
      this.btnPermission = []
    }
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  methods: {
    setTwoLists(data) {
      const arr = data.map(item => item.funCode)
      this.btnPermission.forEach(item => {
        if (!arr.includes(item.funCode)) {
          console.log(item)
          data.push({ funCode: item.funCode, funName: item.funName })
        }
      })
    },
    makeBtn(data) {
      this.btnPermission = data.map(item => ({ funCode: item.funCode, funName: item.funName }))
      this.btnLists && mergeFunName.call(this, this.btnLists)
      this.btnLists2 && mergeFunName.call(this, this.btnLists2)
    }
  },
  directives: { permission }
}
export default mixins

